Electron で AWS Management Console をデスクトップアプリ化してみた

#AWSマネジメントコンソール

#AWS

諏訪悠紀

2016.05.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

AWS Management Console をデスクトップアプリ化

Electron は HTML / CSS / Javascript を使ってクロスプラットフォームに対応したデスクトップアプリを作ることができる、先日バージョン 1.0 がリリースされたばかりのプラットフォームです。Web アプリ開発者が慣れ親しんだ環境でデスクトップアプリを開発することができます。

@IT に寄稿した記事にも詳しく書いていますので、こちらもご参照ください。

Electron 1.0でデスクトップアプリ開発超入門――動作の仕組み、基本的な使い方、セキュリティの懸念点 (1/3) - ＠IT

ブラウザで開くような感覚で、デスクトップアプリを作ることができるのが特徴です。デスクトップアプリを一から作るのも大変面白いですが、Web アプリをそのままデスクトップアプリにすることもできてしまいます。

そこで今回は AWS Management Console をそのままデスクトップアプリにしてみました。

アプリの開発

まずはディレクトリを作成し、

$ mkdir aws-mc && cd aws-mc

package.json を作りましょう。

{
  "name"    : "aws-mc",
  "version" : "1.0.0",
  "main"    : "main.js"
}

main.js はウインドウを1画面出すだけです。

// electronモジュールを読み込み
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
 
// 新しいウィンドウ(Webページ)を生成
let mainWindow
function createWindow () {
  // BrowserWindowインスタンスを生成
  mainWindow = new BrowserWindow({width: 1280, height: 800})
  // index.htmlを表示
  mainWindow.loadURL('file://' + __dirname + '/index.html')
  // ウィンドウを閉じたら参照を破棄
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
 
// アプリの準備が整ったらウィンドウを表示
app.on('ready', createWindow)
 
// 全てのウィンドウを閉じたらアプリを終了
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

index.html で、Innner HTML として表示します。ログイン URL はアカウントによって変わるので、もし試す場合は適宜変更してください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AWS Management Console</title>
</head>
<body>
  <webview id="mainWebview" src="https://xxxxxxxxxxxx.signin.aws.amazon.com/console" autosize="on"></webview>
  <style>
  webview {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  </style>
</body>
</html>